<template>
	<view class="content">
		<uni-nav-bar @clickLeft="goBack()" :statusBar="true">
			<view slot="left">
				<uni-icons class="input-uni-icon" type="back" size="22" color="#666666" />
			</view>
			<view>
				<uni-search-bar @confirm="search" :radius="30" ></uni-search-bar>
			</view>
		</uni-nav-bar>

		<view class="top">
			<view class="top-item" :class="[topCheck == 'fangwu' ? 'top-item-selected' : '']" @click="chooseTop('fangwu')"><text>我的房屋</text></view>
			<view class="top-item" :class="[topCheck == 'jiaju' ? 'top-item-selected' : '']" @click="chooseTop('jiaju')"><text>我的家具</text></view>
		</view>
		<view class="tab_view">
			<view :class="[Tabstate == 1 ? 'tabs_active' : 'tabs']" @click="ChooseTab(1)">全部</view>
			<view :class="[Tabstate == 2 ? 'tabs_active' : 'tabs']" @click="ChooseTab(2)">未交租</view>
			<view :class="[Tabstate == 3 ? 'tabs_active' : 'tabs']" @click="ChooseTab(3)">已交租</view>
			<view :class="[Tabstate == 4 ? 'tabs_active' : 'tabs']" @click="ChooseTab(4)">已退租</view>
		</view>
		<!--租客列表标题-->
		<view class="content_1">
			
			<view class="item" v-for="(item_renter, index_renter) in renterList" :key='index_renter' 
			v-if="
			Tabstate == 1 ||
			(Tabstate == 2 && item_renter.status==2)||
			(Tabstate == 3 && item_renter.status==1)||
			(Tabstate == 4 && item_renter.status==3)
			">
				<view class="xian"></view>
				<view class="status" v-if="item_renter.status==1" style="background-color: #00992E;"><text>已交租</text></view>
				<view class="status" v-else-if="item_renter.status==2"><text>未交租</text></view>
				<view class="status" v-else-if="item_renter.status==3" style="background-color: #999999;"><text>已退租</text></view>
				<view class="item-1">
						<view class="item-left">
							<view class="item-left-1">
								<view class="item-left-image">
									<image :src="item_renter.avatar"></image>
								</view>
								<view class="item-left-info">
									<view class="item-left-info-1">
										<view class="item-left-name">
											<text>{{item_renter.customer_name}}</text>
										</view>
										<view class="item-left-auth">
											<text>{{item_renter.real_name}}</text>
										</view>
									</view>
									<view class="item-left-info-2">
										<text>{{item_renter.customer_phone}}</text>
									</view>
								</view>
							</view>
							<view class="item-left-2">
								<view v-if="item_renter.payrent_time"><text>交租日期：{{item_renter.payrent_time}}</text></view>
								<view v-if="item_renter.contract_time"><text>合同日期：{{item_renter.contract_time}}</text></view>
							</view>
						</view>
						<view class="item-right">
							<view class="item-right-name">
								<text>{{item_renter.house_name}}</text>
								<text>{{item_renter.goods_name}}</text>
							</view>
							<view class="item-right-type">
								<text v-if="item_renter.way_show">每{{item_renter.way_show}}一次</text>
								<text v-else>{{item_renter.house_direction}}·{{item_renter.house_area}}·{{item_renter.house_floor}}</text>
							</view>
							<view class="item-right-address">
								<text>{{item_renter.house_addr}}</text>
								<text v-if="item_renter.months_money">租金：¥{{item_renter.months_money}}</text>
							</view>
							<view class="item-right-trate">
								<view>
									<text>{{item_renter.house_type}}</text>
								</view>
							</view>
							<view class="item-right-price">
								<text v-if="item_renter.house_money">¥ {{item_renter.house_money}}/月</text>
							</view>
						</view>
				</view>
				
				<block v-if="item_renter.status==2">
					<view class="item-2" v-if="item_renter.room_pay_status==6" @click="uploadReceipt(item_renter.room_id)">
						<text>待传账单</text>
					</view>
					<view class="item-2" v-else style="background-color: #999999;">
						<text>已传账单</text>
					</view>	
				</block>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {Request} from '../../../../utils/request.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	
	//定义getApp对象
	const app = getApp();
	export default {
		components: {uniNavBar, uniSearchBar},
		data() {
			return {
				searchText: '',
				topCheck: 'fangwu',
				//标签切换状态
				Tabstate: '1',
				//租客列表
				renterList: [],
				//交租状态
				rentermoney: '1'
			}
		},
		methods: {
			search: function(res) {
				this.searchText = res.value
				this.requestList()
			},
			chooseTop: function(res) {
				this.topCheck = res
				this.requestList()
			},
			//标签选中
			ChooseTab: function(index) {
				this.Tabstate = index
			},
			//跳转至账单上传
			uploadReceipt: function(room_id) {
				uni.redirectTo({
					url:"/pages/mine/owner/takephoto/takephoto?room_id="+room_id
				})
			},
			//跳转回首页
			goBack: function() {
				uni.switchTab({
				    url: '/pages/mine/mine?userstate=owner'
				});
			},
			requestList: function() {
				this.renterList = []
				//获取租客列表
				new Request('landboos/Get_House_Customer/GetCustomerList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							topCheck: this.topCheck,
							searchText: this.searchText,
						}
					},
					(res) => {
						if (res.data.code == '0') {
							uni.showToast({
								title: '暂无数据',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '1') {
							this.renterList = res.data.data
						}
					}
				)
			}
		},
		onLoad() {
			this.requestList()
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
	
	.item {
		position: relative;
		width: 100%;
		margin-top: 15upx;
		margin-bottom: 25upx;
	}
	.xian {
		position: absolute;
		width: 1upx;
		height: 150upx;
		top: 40upx;
		left: 45%;
		background-color: #bfbfbf;
	}
	.status {
		position: absolute;
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		top: 5upx;
		right: 20upx;
		text-align: center;
		font-size: 24upx;
		border-radius: 90upx;
		background-color: #67CDD4;
		color: #FFFFFF;
	}
	.item-1 {
		height: auto;
		display: flex;
		background-color: #FFFFFF;
		padding-top: 20upx;
	}
	.item-left {
		width: 45%;
		padding-left: 10upx;
	}
	.item-left-1 {
		display: flex;
	}
	.item-left-image {
		width: 120upx;
		height: 120upx;
		margin-right: 10upx;
	} 
	.item-left-image image {
		width: 100%;
		height: 100%;
		border-radius: 90upx;
	} 
	.item-left-info-1 {
		display: flex;
	}
	.item-left-auth {
		margin-left: 10upx;
		border-radius: 5px;
		border: 1px solid rgba(255, 194, 109, 100);
	}
	.item-left-auth text {
		font-size: 24upx;
		color: #999999;
	}
	.item-left-info-2 {
		padding-top: 18upx;
	}
	.item-left-info-2 text {
		font-size: 24upx;
		color: #999999;
	}
	.item-left-2 {
		font-size: 24upx;
		color: #999999;
		padding-top: 20upx;
		padding-left: 10upx;
	}
	
	
	
	.item-right {
		width: 55%;
		padding-left: 20upx;
	}
	.item-right-name {
		margin-bottom: 10upx;
	}
	.item-right-name text {
		border-bottom: 5upx solid #B3E8DD;
	}
	.item-right-type {
		font-size: 24upx;
		color: #999999;
		margin: 10upx 0;
	}
	.item-right-address {
		font-size: 24upx;
		color: #999999;
		margin: 10upx 0;
	}
	.item-right-trate {
		display: flex;
		margin: 10upx 0;
	}
	.item-right-trate view {
			font-size: 24upx;
			color: #FFFFFF;
			background-color: #B3E8DD;
			margin-right: 10upx;
	}
	.item-right-price {
		font-size: 30upx;
		color: #FFC26D;
		margin: 10upx 0;
	}
	
	
	.item-2 {
		width: 100%;
		line-height: 70upx;
		text-align: center;
		background-color: #63D0D5;
	}
	.item-2 text {
		font-size: 28upx;
		color: #FFFFFF;
	}
	
	.status_bar {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #F8F8F8;  
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #F8F8F8;  
	    top: 0;  
	    z-index: 999;  
	}
	
	.top {
		display: flex;
		justify-content: center;
		margin: 20upx 20upx 0 20upx;
	}
	.top-item {
		width: 50%;
		line-height: 60upx;
		margin: 0 30upx 0 30upx;
		background-color: #FFFFFF;
		border-radius: 18upx;
		text-align: center;
	}
	.top-item text {
		font-size: 28upx;
	}
	.top-item-selected {
		color: #FFFFFF;
		background-color: #67CDD4;
	}

	/*
		租客列表标题样式
	*/
	.content_1 {}

	.house_view {
		margin-top: 40upx;
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 20upx 10upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.rent_view {
		height: 246upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.rent_state {
		height: 50upx;
		line-height: 50upx;
		font-size: 30upx;
		font-weight: bold;
		color: #349905;
	}

	.renter_detail {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.renter_img {
		height: 80upx;
		width: 80upx;
		border-radius: 80upx;
		background-color: #49453A;
		margin-right: 20upx;
	}

	.renter_name {
		height: 35upx;
		line-height: 35upx;
		font-size: 28upx;
		color: #2D2D2D;
	}

	.renter_types {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.types_view {
		padding: 8upx;
		border: solid 1upx #FFC26D;
		border-radius: 5upx;
		font-size: 24upx;
		color: #2D2D2D;
		margin-right: 8upx;
	}

	.renter_phone {
		height: 40upx;
		line-height: 50upx;
		font-size: 26upx;
		color: #2D2D2D;
	}

	.house_detail {
		height: 246upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		width: 350upx;
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	.rent_time {
		height: 100upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.time_view {
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
		padding-left: 400upx;
		color: #B6B6B6;
		display: flex;
		align-items: center;
	}

	.time_name {
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
		margin-right: 20upx;
	}

	.time {
		height: 50upx;
		line-height: 50upx;
		font-size: 26upx;
	}

	.renter_title {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	.line {
		height: 2upx;
		background-color: #BBBBBB;
		margin-top: 10upx;
	}

	.types {
		width: 80upx;
		height: 40upx;
		line-height: 40upx;
		font-size: 20upx;
		color: #666666;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 0 10upx;
		margin-right: 5upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		box-sizing: content-box;
	}

	/*
		标签样式
	*/
	.tab_view {
		height: 100upx;
		margin-top: 20upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 100upx;
	}

	.tabs {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #2D2D2D;
	}

	.tabs_active {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #63D0D5;
	}
</style>
